<template >
    <div class="TheLogo"></div>
    <div class="loginBodyView">
        <div class="loginBody">
            <!-- 左侧图片与提示 -->
            <div class="left">
                <div class="content">
                    <h1 style="font-size: 30px;">欢迎登录</h1>
                    <h1 style="font-size: 35px;">Uav dispatching system</h1>
                    <h1 style="font-size: 40px;">无人机智能管理系统</h1>
                </div>
            </div>
            <!-- 右侧登录表单 -->
            <div class="right">
                <div class="leading">
                    <div v-if="leading" style="display: flex;align-items: center;}">
                        <el-icon class="is-loading" size="30">
                            <Loading />
                        </el-icon>
                        <text style="margin-left: 3px;font-size: 15px;color: brown;">正在登录...</text>

                    </div>
                </div>
                <div class="loginBox">
                    <h1 class="loginH1">登录</h1>
                    <div class="form">
                        <Print title="账号" group="count"></Print>
                        <Print title="密码" group="password"></Print>
                        <div class="loginButtom" @click="onSubmit">Login In</div>
                    </div>
                    <div style="display: flex;justify-content: flex-end;">
                        <a class="bottomtext">更多服务</a>
                        <a class="bottomtext">联系我们</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang='ts'>
import { onMounted, ref, provide, reactive, UnwrapRef } from 'vue'
import { ELocalStorageKey, ERouterName, EUserType } from '@/types'
import { login, LoginBody } from '@/api/manage'
import Print from '@/components/printText/Print.vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ElNotification } from 'element-plus'
import useUserStore from '@/store/modules/user';
let useStore = useUserStore() ;
let $router = useRouter();
let leading = ref(false)
var count = ref('请输入账号')
var password = ref('请输入密码')
provide('count', count)
provide('password', password)
const formState: UnwrapRef<LoginBody> = reactive({
    username: 'adminPC',
    password: 'adminPC',
    flag: EUserType.Web,
})

const onSubmit = async () => {
    leading.value = true
    formState.password = password.value
    formState.username = count.value
    try {
        const result = await login(formState)
        if (result.code === 0) {
            useStore.setUserName(result.data.username)
            localStorage.setItem(ELocalStorageKey.Token, result.data.access_token)
            localStorage.setItem(ELocalStorageKey.WorkspaceId, result.data.workspace_id)
            localStorage.setItem(ELocalStorageKey.Username, result.data.username)
            localStorage.setItem(ELocalStorageKey.UserId, result.data.user_id)
            localStorage.setItem(ELocalStorageKey.Flag, EUserType.Web.toString()) 
            ElNotification({
                title: '登录成功',
                message: '欢迎回来 '+result.data.username,
                type: 'success',
            })
            if ($router.currentRoute?._value.query.redirect)
                $router.push($router.currentRoute?._value.query.redirect)
            else $router.push('/')
        } else {
            ElMessage.error(result.message)
        }
    } finally {
        leading.value = false
    }


}
onMounted(() => {
})
</script>

<style scoped lang='scss'> 
.TheLogo{
    position: absolute;
    top: 40px;
    left: 40px;
    font-size: 80px;
    color: rgb(162, 77, 20);
}
.loginBodyView {
     height: 100vh;
     width: 100%;
     background-color: $base-login-backColor;
     display: flex;
     align-items: center;

     .loginBody {
         height: 65%;
         width: 65%;
         border-radius: 30px;
         margin: 0 auto;
         display: flex;
         // background-image: url(../../assets//image/pexels-photo-1939485.jpeg);
         //     background-size: 100% 100%;
         background-color: rgb(255, 255, 255);
         box-shadow: 1px 1px 50px rgb(129, 129, 129);

         .left {
             width: 60%;
             height: 100%;
             border-radius: 30px;
             background-size: 100% 100%;
             background-image: $base-login-image;
             box-shadow: 3px 3px 25px black;

             .content {
                 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                 color: white;
                 height: 30%;
                 width: 70%;
                 transform: translateY(200%);
                 margin: 0 auto;
                 background-color: aliceblue;
                 border-radius: 20px;
                 border: 1px rgb(96, 96, 96) solid;
                 box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                 background-color: rgba(255, 255, 255, 0.1);
                 backdrop-filter: blur(8px);
                 -webkit-backdrop-filter: blur(8px);
                 padding: 15px;
                 box-sizing: border-box;
             }
         }

         .right {
             width: 40%;
             height: 100%;
             display: flex;
             align-items: center;
             flex-direction: column;

             .leading {
                 align-items: center;
                 justify-content: center;
                 display: flex;
                 margin: 6% 0;
                 height: 8%;
                 width: 30%;
             }

             .loginBox {
                 margin: 0 auto;
                 height: 60%;
                 width: 80%;
                 border-bottom: 3px rgb(158, 158, 158) solid;

                 .bottomtext {
                     transform: translateY(20px);
                     font-size: 15px;
                     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
                     margin: 3px;
                     line-height: 10px;
                     height: 10px;
                     width: 80px;
                     cursor: pointer;
                 }

                 .loginH1 {
                     font-size: 40px;
                     text-align: center;
                     text-shadow: 2px 2px 15px rgb(116, 116, 116);
                     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                 }

                 .form {
                     display: flex;
                     padding: 20px 0;
                     align-items: center;
                     flex-direction: column;
                 }

                 .loginButtom {
                     box-sizing: border-box;
                     box-shadow: 2px 2px 20px rgb(60, 105, 163);

                     margin-top: 30px;
                     width: 300px;
                     height: 45px;
                     background-color: $base-login-buttom;
                     border-radius: 5px;
                     line-height: 45px;
                     text-align: center;
                     font-size: 23px;
                     color: white;
                     cursor: pointer;
                 }

                 .loginButtom:hover {
                     background-color: $base-login-buttom-hover;
                 }

                 .loginButtom:active {
                     background-color: $base-login-buttom-checked;
                     border: 2px black solid;
                 }
             }
         }
     }
 }

 h1 {
     margin: 6px;
 }
</style >
